<template>
  <a-tabs
    :active-key="activeKey"
    size="small">
    <a-tab-pane key="flow-attr">
      <span slot="tab">
        <a-icon type="cluster"/>
        流程属性
      </span>
      <a-form layout="vertical">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="流程id">
          <a-input
            :value="flowData.attr.id"
            disabled/>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="node-attr">
      <span slot="tab">
        <a-icon type="profile"/>
        节点属性
      </span>

      <a-form layout="vertical">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="类型">
          <a-tag color="purple">{{ currentSelect.type }}</a-tag>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="id">
          <a-input
            :value="currentSelect.id"
            disabled/>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="名称">
          <a-input
            :value="currentSelect.nodeName"
            placeholder="请输入节点名称"
            @change="nodeNameChange"/>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="link-attr">
      <span slot="tab">
        <a-icon type="branches"/>
        连线属性
      </span>
      <a-form layout="vertical">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="id">
          <a-input
            :value="currentSelect.id"
            disabled/>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="源节点">
          <a-input
            :value="currentSelect.sourceId"
            disabled/>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="目标节点">
          <a-input
            :value="currentSelect.targetId"
            disabled/>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="文本">
          <a-input
            :value="currentSelect.label"
            @change="linkLabelChange"/>
        </a-form-item>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['plumb', 'flowData', 'select'],
  data() {
    return {
      currentSelect: this.select,
      formItemLayout: {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 }
      },
      activeKey: 'flow-attr'
    }
  },
  watch: {
    select(val) {
      this.currentSelect = val
      if (this.currentSelect.type === 'link') {
        this.activeKey = 'link-attr'
      } else if (!this.currentSelect.type) {
        this.activeKey = 'flow-attr'
      } else {
        this.activeKey = 'node-attr'
      }
    },
    currentSelect: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  },
  methods: {
    nodeNameChange(e) {
      this.currentSelect.nodeName = e.target.value
    },
    linkLabelChange(e) {
      const label = e.target.value
      this.currentSelect.label = label
      const conn = this.plumb.getConnections({
        source: this.currentSelect.sourceId,
        target: this.currentSelect.targetId
      })[0]
      const linkId = conn.canvas.id
      const labelHandle = e => {
        const event = window.event || e
        event.stopPropagation()
        this.currentSelect = this.flowData.linkList.find(l => l.id === linkId)
      }

      if (label !== '') {
        conn.setLabel({
          label: label,
          cssClass: `linkLabel ${linkId}`
        })
        // 添加label点击事件
        document.querySelector('.' + linkId).addEventListener('click', labelHandle)
      } else {
        // 移除label点击事件
        document.querySelector('.' + linkId).removeEventListener('click', labelHandle)

        const labelOverlay = conn.getLabelOverlay()
        if (labelOverlay) conn.removeOverlay(labelOverlay.id)
      }
    }
  }
}
</script>
